<template>
  <div class="main-container">
    <common_nav title="账户信息" backTitle="" :appPathObj="{}" :routerPath="{}"></common_nav>

<!--    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="basic">-->
        <div class="table_data content">
          <div class="account_info">
            <div class="info-box top-margin">
              <p class="label">手机号</p>
              <p class="value">{{ form.mobile }}
                <!--        <span class="setting">修改手机</span>-->
              </p>
            </div>
            <div class="info-box">
              <p class="label">头像</p>
              <p class="value avatar">
                <el-avatar :size="40" :src="default_avatar" v-if="form.avatar == ''"></el-avatar>
                <el-avatar :size="40" :src="form.avatar" v-else></el-avatar>
<!--                &nbsp;<label @click="edit('avatar')"><span class="setting">更换</span></label>-->
              </p>
            </div>

            <div class="info-box"><p class="label">昵称</p>
              <p class="value" v-if="!edit_status.nickname">
                <span class="value-text">{{ form.nickname }}</span>
                <span class="setting" @click="edit('nickname')">修改</span>
              </p>
              <p class="value" v-else>
                <el-input size="small" v-model="form.nickname" style="width: 200px;" ></el-input>&nbsp;
                <span class="init_set" @click="handleBlur">保存</span>&nbsp;&nbsp;
                <span class="init_set" @click="edit_status.nickname = false">取消</span>
              </p>
            </div>
            <div class="info-box"><p class="label">账户名称</p>
              <p class="value" v-if="!edit_status.name">
                <span class="value-text">{{ form.name }}</span>
                <span class="setting" @click="edit('name')">修改</span>
              </p>
              <p class="value" v-else>
                <el-input size="small" v-model="form.name" style="width: 200px;" ></el-input>&nbsp;
                <span class="init_set" @click="handleBlur">保存</span>&nbsp;&nbsp;
                <span class="init_set" @click="edit_status.name = false">取消</span>
              </p>
            </div>
<!--            <div class="info-box"><p class="label">短信状态</p>
              <el-radio-group v-model="form.text_message_status" @change="handleBlur('text_message_status')">
                <el-radio label="1">开启</el-radio>
                <el-radio label="0">关闭</el-radio>
              </el-radio-group>
            </div>
            <div class="info-box" v-if="form.text_message_status==1"><p class="label">短信余额</p>
              {{form.text_message_amount}}
            </div>-->
            <div class="info-box">
              <p class="label">简介</p>
              <p class="value desc">
                <el-input type="textarea" v-model="form.remark" class="desc_text" @focus="handleFocus('remark')"  @blur="handleBlur" :placeholder="placeholder"></el-input>
              </p>
              <p class="edit_status" v-if="descEditText != ''">{{descEditText}}</p>
            </div>
          </div>
        </div>
<!--      </el-tab-pane>
    </el-tabs>-->
    <ImagesPick :show.sync="dialog.uploadImageStatus" @imageFn="callImageFn"></ImagesPick>
  </div>

</template>
<script>

import { getBasicInfo } from '@/api/user/user'
import ImagesPick from "@/components/common/ImagesPick.vue"

export default {
  name: 'account_info',
  components: { ImagesPick },
  data () {
    return {
      radio: '',
      dialog: {
        addressStatus: false,
        uploadImageStatus: false,
        qrcode_status: false
      },
      default_avatar:'',// require('../../../assets/images/default-avatar.jpg'),
      form: {
        mobile: '',
        avatar: '',
        nickname: '',
        name: '',
        text_message_status: false,
        text_message_amount: '',
        remark: '',
        level: ''
      },
      placeholder: '请介绍您的服务或产品，限300个字符',
      props: {value: 'id', label: 'name'},
      tags: '',
      descEditText: '',
      edit_status: {
        nickname: false,
        name: false,
        remark: false,
        avatar: false
      },
      activeName: 'basic'
    }
  },
  mounted() {
  },
  created() {
    this.getInfo()
  },
  methods: {
    handleClick() {

    },
    callImageFn(value) {
      if (value.files.length > 0 && typeof value.files[0].file_url != 'undefined') {
        this.edit_status.avatar = true
        this.form.avatar = value.files[0].sign_url
        this.handleBlur()
      }
    },
    getInfo() {
      getInfo({device: 1}).then(res => {
        this.form = res.data.user_info
        if (this.form.avatar != '') {
          this.$store.dispatch('setUserAvatar', this.form.avatar).then(() => {
          })
        }
      });
    },
    edit(key) {
      if (key == 'nickname') {
        this.edit_status.nickname = true
      }
      if (key == 'avatar') {
        this.edit_status.avatar = true
        this.dialog.uploadImageStatus = true
      }
      if (key == 'name') {
        this.edit_status.name = true
      }
    },
    handleFocus(key) {
      if (key == 'remark') {
        this.edit_status.remark = true
      }
    },
    handleBlur(type) {
      let param = {}
      if (typeof type != 'undefined') {
        param[type] = this.form[type]
      }
      for (let k in this.edit_status) {
        if (this.edit_status[k]) {
          switch (k) {
            case 'remark':
              this.descEditText = '正在保存'
              param.remark = this.form.remark
              break
            case 'nickname':
              if (this.form.nickname.length > 12) {
                this.$message({
                  type: 'error',
                  message: '昵称不能超过12个字符'
                })
                return false;
              }
              param.nickname = this.form.nickname
              break
            case 'avatar':
              param.avatar = this.form.avatar
              break
            case 'name':
              if (this.form.name.length > 20) {
                this.$message({
                  type: 'error',
                  message: '商户名称不能超过20个字符'
                })
                return false;
              }
              param.name = this.form.name
              break;
            default:
          }
          this.edit_status[k] = false
        }
      }
      setUserInfo(param).then( res => {
        this.descEditText = ''
        this.tags = ''
        this.getUserInfo()
      })
    }
  },
};
</script>
<style scoped lang="scss">
/deep/.el-textarea__inner {
  background-color: #f6f7f8 !important;
  border: 0px solid #fff;
  height: 100px;
}
/*/deep/.el-button {
  height: 40px;
  margin-top: 10px;
}*/
/deep/.el-avatar {
  margin-top: 7px;
}
/deep/.el-radio-group {
  line-height: 55px;
  margin-top: 5px;
}
/deep/.el-tag {
  margin:12px 3px 2px 0;
}
.content {
  width: 100%;
  height: 100%;
  border: 0px solid #ccc;
  .account_info {
    width: 36%;
    min-height: 420px;
    border: 0px solid #ff0000;
    margin: 0px 0 0 0px;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .info-box {
      position: relative;
      display:flex;
      flex-wrap:wrap;
      width: 100%;
      //min-height: 55px;
      line-height: 50px;
      border: 0px solid #ccc;
      margin: 0px auto;
      .label {
        width: 20%;
        margin-left: 40px;
        font-size: 16px;
        font-weight: 500;
        color: #c8c8d0;
      }
      .value {
        max-width: 70%;
        font-size: 14px;
        font-weight: 600;
        color: #40404c;
        line-height: 50px;
        // padding-top: 18px;
        border: 0px solid #ff0000;
        display: flex;
        flex-wrap: wrap;
        .value-text {
          margin-right: 10px;
        }
        .setting {
          border: 0px solid #ff0000;
          //margin-left: 50px;
          color: #00907F;
          display: inline-block;
          //vertical-align: middle;
          cursor: pointer;
        }
        /deep/.el-button--mini {
          height: 28px !important;
          margin-top: 12px !important;
        }
        .init_set {
          border: 0px solid #ff0000;
          color: #00907F;
          display: inline-block;
          //vertical-align: middle;
          cursor: pointer;
        }
      }
      .avatar {
        //padding-top: 3px !important;
        .setting {
          //margin-top: 16px !important;
        }
      }
      .desc {
        padding-top: 0px !important;
        .desc_text {
          margin:10px 0 0 0 !important;
          min-width: 320px !important;
          height: 100px !important;
        }
      }
      .edit_status {
        border: 0px solid #ccc;
        margin-left: 155px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color:#409EFF;
      }
    }
    .top-margin {
      padding-top: 20px !important;
    }
    /*    div:first-child {
          margin-top: 40px;
        }
        div:last-child {
          margin-bottom: 40px;
        }*/
  }
}
</style>